<template>
  <div>
    <el-card shadow="never">
      <section class="question-title-container">
        {{`${user.name}(${user.uid})`}}
      </section>
      <section>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="课程评价" name="course">
            <el-row :gutter="20">
              <!-- 学年学期 -->
              <!-- <el-col :span="8">
                <div class="question-search-container">
                  <div class="question-search-title">学年学期：</div>
                  <CalendarSelect v-model="queryParams.calendarId"></CalendarSelect>
                </div>
              </el-col> -->
              <!-- 课程评价类型 -->
              <!-- <el-col :span="8">
                <div class="question-search-container">
                  <div class="question-search-title">课程评价类型：</div>
                  <el-select v-model="queryParams.evaluateType">
                    <el-option label="评教" value="1"></el-option>
                    <el-option label="评学" value="2"></el-option>
                  </el-select>
                </div>
              </el-col> -->
            </el-row>

            <edu-table :url="url" ref="mainTable" :order="false" :selection="false">
              <edu-table-column :label="$t('课程名称')" prop="courseName"></edu-table-column>
              <edu-table-column :label="$t('学年学期')" prop="calendarName"></edu-table-column>
              <edu-table-column v-if="queryParams.evaluateType === '2'" :label="$t('评学问卷主题名')" prop="managementName"></edu-table-column>
              <edu-table-column v-if="queryParams.evaluateType === '1'" :label="$t('评教问卷主题名')" prop="managementName"></edu-table-column>


              <edu-table-column :label="$t('评教开放时间')" min-width="150px" v-if="queryParams.evaluateType === '1'">
                <template slot-scope="scope">
                  {{`${scope.row.startTime} - ${scope.row.endTime}`}}
                </template>
              </edu-table-column>

              <edu-table-column v-if="queryParams.evaluateType === '1'" :label="$t('是否强制')" prop="forceStateName"></edu-table-column>

              <edu-table-column v-if="queryParams.evaluateType === '1'" :label="$t('评教操作')">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    :disabled="scope.row.finishState === 2"
                    @click="checkTeachClick(scope.row)">
                    查看
                  </el-button>
                </template>
              </edu-table-column>

              <edu-table-column :label="$t('评学开放时间')" min-width="150px" v-if="queryParams.evaluateType === '2'">
                <template slot-scope="scope">
                  {{`${scope.row.startTime} - ${scope.row.endTime}`}}
                </template>
              </edu-table-column>

              <edu-table-column v-if="queryParams.evaluateType === '2'" :label="$t('是否强制')" prop="forceStateName"></edu-table-column>

              <edu-table-column :label="$t('评学完成状态')" v-if="queryParams.evaluateType === '2'">
                <template slot-scope="scope">
                  <!-- 0：未完成；1：已完成；2：已过期 -->
                  <el-tag v-if="scope.row.finishState === 0" type="danger">未完成</el-tag>
                  <el-tag v-if="scope.row.finishState === 1" type="success">已完成</el-tag>
                  <el-tag v-if="scope.row.finishState === 2" type="info">已过期</el-tag>
                </template>
              </edu-table-column>

              <edu-table-column :label="$t('评学操作')"
                v-if="queryParams.evaluateType === '2'">
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.finishState === 0"
                    type="text"
                    :disabled="scope.row.finishState === 2"
                    @click="evaluateClick(scope.row)">
                    评学
                  </el-button>
                  <el-button v-if="scope.row.finishState === 1" type="text"
                  @click="checkLearnClick(scope.row)">查看</el-button>
                </template>
              </edu-table-column>
            </edu-table>
          </el-tab-pane>

          <el-tab-pane label="过程评价" name="process">
            <edu-table  :url="processUrl" ref="processTable" :order="false" :selection="false">
              <edu-table-column :label="$t('过程评价主题名')" prop="managementName"></edu-table-column>
              <edu-table-column :label="$t('过程评价开放时间')" min-width="150px">
                <template slot-scope="scope">
                  {{`${scope.row.startTime} - ${scope.row.endTime}`}}
                </template>
              </edu-table-column>
              <edu-table-column :label="$t('是否强制')" prop="forceStateName"></edu-table-column>
              <edu-table-column :label="$t('过程评价完成状态')">
                <template slot-scope="scope">
                  <!-- 0：未完成；1：已完成；2：已过期 -->
                  <el-tag v-if="scope.row.finishState === 0" type="danger">未完成</el-tag>
                  <el-tag v-if="scope.row.finishState === 1" type="success">已完成</el-tag>
                  <el-tag v-if="scope.row.finishState === 2" type="info">已过期</el-tag>
                </template>
              </edu-table-column>
              <edu-table-column :label="$t('过程评价操作')" min-width="160px">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    v-if="scope.row.finishState !== 1"
                    :disabled="scope.row.finishState === 2"
                    @click="processClick(scope.row)">
                    过程评价
                  </el-button>
                  <el-button
                    type="text"
                    v-if="scope.row.finishState === 1"
                    @click="checkProcessClick(scope.row)">
                    查看
                  </el-button>
                </template>
              </edu-table-column>
            </edu-table>
          </el-tab-pane>
        </el-tabs>
      </section>
    </el-card>
    <el-dialog
      v-drag-dialog
      ref="detailDialog"
      width="80%"
      :visible.sync="detaildialogShow"
      :close-on-click-modal="false"
      :append-to-body="true">
      <QuestionsWrite
        v-if="detaildialogShow"
        :data="questionListMap"
        :typeTitle="childTypeTitle"
        :ifProcess="ifProcess"
        :ifStudentComeIn="false"
        :title="childTitle"
        :ifForceComeIn="true"
        @onlyGoBack="onlyGoBack">
      </QuestionsWrite>
    </el-dialog>
  </div>
</template>
<script>
import questionnaireApi from 'common/src/api/teachingEvaluation/questionnaire'
import baseUrl from 'common/src/api/teachingEvaluation/env'
import QuestionsWrite from './component/QuestionnairePreview/QuestionsWrite'
export default {
  components: {
    QuestionsWrite
  },
  data() {
    return {
      activeName: 'course',
      labelWidth: '120px',
      detaildialogShow: false,
      queryParams: {
        calendarId: '',
        evaluateType: '2',
        finishState: 0
      },
      url: `${baseUrl}/questionnaireTeacher/listTeacherCourseQuestionnaire`,
      processUrl: `${baseUrl}/questionnaireTeacher/listTeacherProcessQuestionnaire`,
      user: {},
      questionList: [],
      questionListMap: {},
      childTitle: '',
      checkData: {},
      ifProcess: false,
      childTypeTitle: '评学'
    }
  },
  computed: {
    currentUser() {
        if (this.$store.state.session.user) {
            return this.$store.state.session.user;
        }
        return JSON.parse(localStorage.getItem("user"));
    },
    mockUser() {
        if (this.$store.state.session.mockUser) {
            return this.$store.state.session.mockUser;
        }
        return JSON.parse(localStorage.getItem("sessiondata")).mockUser;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getLoginUser()
      this.searchList()
      this.searchProcessList()
    })
  },
  methods: {
    // 获取进入页面的老师的姓名和工号
    getLoginUser() {
      this.user = this.mockUser ? this.mockUser : this.currentUser;
    },
    // 查询-评学
    searchList() {
      this.$nextTick(() => {
        this.$refs.mainTable.pageNum = 1;
        this.$refs.mainTable.search(this.queryParams);
      })
    },
    // 查询-过程
    searchProcessList() {
      this.$nextTick(() => {
        this.$refs.processTable.pageNum = 1;
        this.$refs.processTable.search({
          finishState: 0
        });
      })
    },
    handleClick() {
      this.$nextTick(() => {
        this.searchList()
        this.searchProcessList()
      })
    },
    // 评学click
    evaluateClick(row) {
      // ifProcess字段用来填写问卷的时候做过程评价的特殊处理
      this.ifProcess = false
      this.childTypeTitle = '评学'
      this.childTitle = row.courseName
      let param = {
        managementId: row.managementId,
        objectConfigId: row.objectConfigId,
        teacherCode: row.teacherCode,
        courseCode: row.courseCode
      }
      questionnaireApi.getQuestionnaireDetail(param).then(res => {
        if (res.code == 200 && res.data) {
          this.questionListMap = res.data
          for (const keys in param) {
            this.questionListMap[keys] = param[keys]
          }
          this.questionListMap.evaluateType = 2
          this.detaildialogShow = true
        }
      })
    },
    // 返回当前页面
    onlyGoBack() {
      this.searchList()
      this.searchProcessList()
      this.$emit('goBackAndCheckForceState')
      this.detaildialogShow = false
    },
    // 过程评价click
    processClick(row) {
      this.ifProcess = true
      this.childTitle = row.managementName
      this.childTypeTitle = '过程评价'
      let param = {
        managementId: row.managementId,
        objectConfigId: row.objectConfigId,
        teacherCode: row.teacherCode,
        courseCode: row.courseCode
      }
      questionnaireApi.getQuestionnaireDetail(param).then(res => {
        if (res.code == 200 && res.data) {
          this.questionListMap = res.data
          for (const keys in param) {
            this.questionListMap[keys] = param[keys]
          }
          this.questionListMap.evaluateType = 3
          this.detaildialogShow = true
        }
      })
    },
    // 评学查看click
    checkLearnClick(row) {
      this.ifProcess = false
      let param = {
        objectConfigId: row.objectConfigId,
        teacherCode: row.teacherCode,
        courseCode: row.courseCode,
        managementId: row.managementId
      }
      questionnaireApi.getQuestionnaireResultTeacher(param).then(res => {
        if (res.code === 200) {
          this.checkData = res.data
        }
      })
    }
  },
  watch: {
    "queryParams": {
      handler: function(value) {
        if (value) {
          this.$nextTick(() => {
            this.searchList()
            this.searchProcessList()
          })
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="scss">
.question-title-container {
  font-size: 16px;
  font-weight: bold;
}
.question-search-container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .question-search-title {
    width: 120px;
    text-align: right;
  }
}
</style>
